<template>
  <van-tabs
    v-model="active"
    class="tabs"
    title-active-color="#333333"
    title-inactive-color="#999999"
    @change="handleChange"
  >
    <van-tab
      v-for="(item, index) in values"
      :key="index"
      :title="item.name"
    >
      <slot></slot>
    </van-tab>
  </van-tabs>
</template>
<script>
import { Tab, Tabs } from 'vant'

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  props: {
    values: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      active: 0
    }
  },
  methods: {
    handleChange (val) {
      console.log('handleChange', val)
      this.$emit('change', val)
    }
  }
}
</script>
<style lang="less" scoped>
.tabs {
  margin-top: 50px;
}
</style>
